import {Button, Form, Input, InputNumber, Upload,Switch,DatePicker, Space} from "antd";
import API from "../../api/api";
import { UploadOutlined } from '@ant-design/icons';
import React, {useState} from "react";
import Edit from "../CKEditor/Edit";
import {config, url} from "../../util/config";
import 'braft-editor/dist/index.css'

let token = localStorage.getItem("token")

const request = {
    action: url.file_upload_url,
    headers: {
        'Accept': "application/json",
        'Authorization': token
    }
}




export default function InsertFormForNotice(props){
    let imageUrl = null;
    // let [editorVisible,setEditorVisible] = useState(null)
    let editorVisible = null;
    const [form] = Form.useForm();
    //是否执行了刷新
    let hasFlashed = false;

    const onReset = () => {
        form.resetFields();
    };

    const onFinish = (values) => {

        if(values.desc==undefined && values.new==undefined && values.status==undefined && values.attach==undefined && editorVisible=="<p></p>"){
            alert("其它栏位不能全空")
            return
        }else if(editorVisible == null || editorVisible == "<p></p>"){
            alert("文章内容不可为空")
            return
        }
        else if(values.attach!=undefined){
            values.attachUrls = []
            values.attachNames = []
            if(values.attach.fileList.length>0){
                let tmpList = values.attach.fileList;
                for(let i=0;i<tmpList.length;i++){
                    values.attachUrls.push(tmpList[i].response.result[0].FILE_URL)
                    values.attachNames.push(tmpList[i].response.result[0].FILE_URL_NAME)
                }
                values.attachNum = tmpList.length
            }else if (values.attach.fileList.length==0){
                values.attachNum = 0
            }
        }
        console.log(values)

        if(values.new==undefined || values.new==null || values.new == ""){
            values.new = config.notify_date
        }
        if(values.status==true){
            values.status='Y'
        }else if(values.status==false){
            values.status='N'
        }
        if(API.insertNotice(values)=="ok"){
            if(!hasFlashed){
                //只有返回成功后，才会置父组件的状态值为true，即Modal关闭后实现列表刷新
                props.result(true)
                //执行上一步后，再本组件也加一个标记，来标识已经重置了父组件的刷新状态值status
                hasFlashed = true;
            }
        }
    };

    function getContent(content) {
        // data = content
        // setEditorVisible(content)
        editorVisible = content;
    }

    function getImageUrl(url){
        imageUrl = url
    }

    const onChange = (date, dateString) => {
        console.log(date, dateString);
    }

    return (
        <Form
            preserve={false}
            form={form}
            onFinish={onFinish}
            onReset={onReset}
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 17,
            }}
            layout="horizontal"
            initialValues={{
                ['new']: config.notify_date
            }}
        >
            <Form.Item label="公告标题" name="name" rules={[{ required: true }]}>
                <Input />
            </Form.Item >
            <Form.Item label="公告描述" name={"desc"} >
                <Input />
            </Form.Item>
            <Form.Item label="提醒時間【天數】" name="new">
                <InputNumber min={1} placeholder={`默認${config.notify_date}天`}/>
            </Form.Item>

            <Form.Item label="是否置顶" name={"status"} >
                <Switch />
            </Form.Item>
            <Form.Item label="公告附件" name={"attach"} >
                <Upload name="file" {...request} listType="picture">
                    <Button icon={<UploadOutlined></UploadOutlined>}>上传</Button>
                </Upload>
            </Form.Item>
            <Form.Item
                name="content"
                label="公告内容"
                rules={[{required:true}]}
            >
                <Edit onChange={getContent}></Edit>
            </Form.Item>
            <Form.Item
                label="提交修改"
                name="commit"
            >
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                    重置
                </Button>
            </Form.Item>
        </Form>
    );
}
